<template>
	<div class="login-box">
		<div style="padding: 50px;">
			<img src="/static/img/sun.png" />
		</div>
		<form class="form-horizontal">
			<div class="form-group">
				<div class="col-xs-12"><input type="text" class="form-control" placeholder="Username" name="username"></div>
			</div>
			<div class="form-group">
				<div class="col-xs-12"><input type="password" class="form-control" placeholder="Password" name="password"></div>
			</div>
			<transition name="fade" mode="out-in" appear>
				<p class="tips" v-show="msg">
					{{ msg }}
				</p>
			</transition>
			<div style="text-align: center;">
				<button type="reset" class="btn btn-danger" @click="reset()">Reset</button>
				<button type="button" class="btn btn-primary" @click="login()">Submit</button>
			</div>
		</form>
	</div>
</template>

<script>
	export default {
		beforeCreate: function() {
			var bgs = ['tumblr_oofmiey7PS1vihf3to1_540.gif', 'tumblr_ork3ajTEvD1spe104o1_1280.jpg',
				'tumblr_ossp3r0cJr1rwbv1yo1_1280.jpg', 'tumblr_osvhe1d6HH1r2geqjo1_540.gif',
				'tumblr_ot1se2mFOb1qicox1o4_1280.jpg', 'tumblr_ow9wvd39wy1qcvii9o1_1280.jpg'
			]
			var bg = bgs[parseInt(Math.random() * bgs.length)]
			document.body.style = 'background-image: url(/static/img/bg/' + bg + ')'
			document.body.className = 'bg'
		},
		destroyed: function() {
			document.body.className = ''
			document.body.style = ''
		},
		data: function() {
			return {
				msg: this.$route.params.msg
			}
		},
		methods: {
			login: function() {
				var username = this.$el.querySelector('input[name=username]').value
				var password = this.$el.querySelector('input[name=password]').value
				var that = this
				if(username && password) {
					this.$store.dispatch('login', {
						username: username,
						password: password
					}).then((response) => {
							if(response && response.body.err) {
								this.$data.msg = response.body.err
								return
							}
							sessionStorage.setItem('ACCESS-TOKEN', response.headers.map['authorization'][0])
							this.$router.push('/')
						},
						function(err, e) {
							switch(err.status) {
								case 504:
									that.$data.msg = 'Timeout'
									break
								case 500:
									that.$data.msg = 'Unexpected Exception'
									break
								default:
									that.$data.msg = err.statusText
									break
							}
						})
				}
			},
			reset: function() {
				this.msg = ''
			}
		}
	}
</script>
<style>
	.bg {
		box-shadow: none;
	}
	
	.frame::after {
		content: "Login：";
	}
	
	.tips {
		text-align: center;
		padding: 14px 15px;
		font-size: 14px;
		font-family: Helvetica, sans-serif;
		line-height: 16px;
		color: #fff;
		background: #000000;
		background: rgba(0, 0, 0, 0.33);
		margin-bottom: 10px;
	}
	
	body {
		background-repeat: no-repeat;
		background-size: cover;
		transition: bottom .3s ease-out 1.7s;
		background-position-x: 50%;
		background-position-y: 30%;
	}
	
	button {
		width: 80px;
		margin: 0 10px;
	}
	
	body>section {
		text-align: -webkit-center;
	}
	
	.form-horizontal {
		max-width: 600px;
		margin: 0 auto;
	}
</style>